<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园论坛 - 帖子详情</title>
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
    <!-- 页面头部 -->
    <div class="header">
        <div class="container">
            <h1 class="logo">校园论坛</h1>
            <div class="user-info">
                <span id="user-nickname">游客</span>
                <a href="login.html" id="login-link">登录</a>
                <a href="register.html" id="register-link">注册</a>
                <a href="#" id="logout-link" style="display:none;">退出</a>
            </div>
        </div>
    </div>

    <!-- 导航栏 -->
    <div class="navbar">
        <div class="container">
            <ul class="nav-menu">
                <li><a href="index.html">首页</a></li>
                <li><a href="index.html?sort=latest" style="font-weight: 500;">最新帖子</a></li>
                <li><a href="index.html?sort=hot" style="font-weight: 500;">热门帖子</a></li>
                <li><a href="index.html?sort=featured" style="font-weight: 500;">精华帖子</a></li>
            </ul>
        </div>
    </div>

    <!-- 主要内容区 -->
    <div class="container main-content">
        <div class="sidebar">
            <!-- 分类区 -->
            <div class="category-box" style="background: white; border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
                <h3 style="color: #2c3e50; margin-bottom: 15px; border-bottom: 2px solid #3498db; padding-bottom: 10px;">帖子分类</h3>
                <ul id="category-list" style="list-style: none; padding: 0; margin: 0;">
                    <li style="margin-bottom: 8px;"><a href="index.html?category=all" data-category="all" style="color: #34495e; text-decoration: none; padding: 8px 12px; display: block; border-radius: 4px; transition: background-color 0.2s;">全部</a></li>
                    <li style="margin-bottom: 8px;"><a href="index.html?category=1" data-category="1" style="color: #34495e; text-decoration: none; padding: 8px 12px; display: block; border-radius: 4px; transition: background-color 0.2s;">学习交流</a></li>
                    <li style="margin-bottom: 8px;"><a href="index.html?category=2" data-category="2" style="color: #34495e; text-decoration: none; padding: 8px 12px; display: block; border-radius: 4px; transition: background-color 0.2s;">校园生活</a></li>
                    <li style="margin-bottom: 8px;"><a href="index.html?category=3" data-category="3" style="color: #34495e; text-decoration: none; padding: 8px 12px; display: block; border-radius: 4px; transition: background-color 0.2s;">二手帖子</a></li>
                    <li style="margin-bottom: 8px;"><a href="index.html?category=4" data-category="4" style="color: #34495e; text-decoration: none; padding: 8px 12px; display: block; border-radius: 4px; transition: background-color 0.2s;">社团活动</a></li>
                </ul>
            </div>

            <!-- 相关帖子 -->
            <div class="stats-box" style="background: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
                <h3 style="color: #2c3e50; margin-bottom: 15px; border-bottom: 2px solid #e74c3c; padding-bottom: 10px;">相关帖子</h3>
                <div class="related-posts">
                    <a href="post.html?id=2" class="related-post" style="display: block; color: #34495e; text-decoration: none; padding: 10px; margin-bottom: 8px; border-left: 3px solid #3498db; background: #f8f9fa; border-radius: 4px; transition: background-color 0.2s;">如何高效学习编程</a>
                    <a href="post.html?id=3" class="related-post" style="display: block; color: #34495e; text-decoration: none; padding: 10px; margin-bottom: 8px; border-left: 3px solid #e74c3c; background: #f8f9fa; border-radius: 4px; transition: background-color 0.2s;">校园美食推荐</a>
                    <a href="post.html?id=4" class="related-post" style="display: block; color: #34495e; text-decoration: none; padding: 10px; margin-bottom: 8px; border-left: 3px solid #27ae60; background: #f8f9fa; border-radius: 4px; transition: background-color 0.2s;">二手教材交易</a>
                </div>
            </div>
        </div>

        <div class="content">
            <!-- 帖子内容 -->
            <div class="post-content" style="background: white; border-radius: 12px; padding: 30px; margin-bottom: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
                <h1 id="post-title" style="color: #2c3e50; margin-bottom: 20px; font-size: 28px; line-height: 1.3;">帖子标题</h1>
                <div class="post-meta" style="display: flex; align-items: center; gap: 20px; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid #eee;">
                    <span class="author" id="post-author" style="color: #7f8c8d; font-size: 14px;"><strong>作者：</strong>加载中...</span>
                    <span class="time" id="post-time" style="color: #7f8c8d; font-size: 14px;"><strong>时间：</strong>加载中...</span>
                    <span class="category" id="post-category" style="color: #7f8c8d; font-size: 14px;"><strong>分类：</strong>加载中...</span>
                </div>

                <div class="post-body" id="post-body" style="line-height: 1.8; color: #2c3e50; font-size: 16px; min-height: 200px;">
                    <p style="color: #95a5a6; text-align: center; padding: 40px 0;">帖子内容加载中...</p>
                </div>

                <!-- 互动区 -->
                <div class="post-actions" style="margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee;">
                    <button id="like-btn" class="btn" style="background: #e74c3c; color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; transition: background-color 0.2s;">👍 点赞 (<span id="like-count">0</span>)</button>
                </div>
            </div>

            <!-- 评论区域 -->
            <div class="comments-section" style="background: white; border-radius: 12px; padding: 30px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
                <h3 style="color: #2c3e50; margin-bottom: 25px; font-size: 22px; border-bottom: 2px solid #3498db; padding-bottom: 10px;">评论 (<span id="comment-count">0</span>)</h3>
                
                <!-- 发表评论 -->
                <div class="comment-form" style="margin-bottom: 30px; padding: 20px; background: #f8f9fa; border-radius: 8px;">
                    <textarea id="comment-content" class="form-control" placeholder="写下你的评论..." rows="4" style="width: 100%; padding: 15px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; resize: vertical;"></textarea>
                    <button id="submit-comment" class="btn" style="background: #3498db; color: white; border: none; padding: 12px 25px; border-radius: 6px; cursor: pointer; margin-top: 15px; transition: background-color 0.2s;">发表评论</button>
                </div>

                <!-- 评论列表 -->
                <div class="comments-list" id="comments-list">
                    <!-- 评论将通过JS动态生成 -->
                    <div class="comment-item" style="background: #f8f9fa; border-radius: 8px; padding: 20px; margin-bottom: 15px; border-left: 4px solid #3498db;">
                        <div class="comment-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                            <span class="comment-author" style="color: #2c3e50; font-weight: 500;">用户A</span>
                            <span class="comment-time" style="color: #7f8c8d; font-size: 12px;">2024-01-01 10:30</span>
                        </div>
                        <div class="comment-content" style="color: #34495e; line-height: 1.6;">
                            这是一个示例评论内容。
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <div class="footer">
        <div class="container">
            <p>&copy; 2024 校园论坛. 保留所有权利.</p>
        </div>
    </div>

    <!-- JavaScript 文件 -->
    <script src="assets/libs/jquery.min.js"></script>
    <script src="assets/js/common.js"></script>
    <script src="assets/js/post.js"></script>
</body>
</html>
